<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>查找</title>
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">

  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <link rel="stylesheet" href="/css/global.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>
  <!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
  <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<body>
<div class="bg"></div>
<div id="app">
  <van-row>
    <van-col span="24">
      <van-nav-bar
        title="查找"
        left-text="返回"
        left-arrow
        right-text="编辑"
        @click-left="onClickLeft"
        @click-right="showDeleteButton"
      />


    </van-col>
    <van-col span="24">
      <div class="d-flex">
        <div class="w-100">
          <van-search v-model="input" placeholder="请输入搜索关键词" @search="onSearch"/>
        </div>
        <div class="flex-grow-shrink mr-4">
          <van-dropdown-menu>
            <van-dropdown-item v-model="selectedvalue" :options="status"/>
          </van-dropdown-menu>
        </div>
      </div>
    </van-col>
    <van-col span="24">
      <div class="box m-4 pl-3 pr-3 pb-3">
        <ul class="breakfast-list">
          <!--                    <li v-for="(AModelAndUnits,index) in modelAndUnits ">-->
          <!--                        <div class="flex-grow-shrink">-->
          <!--                            <van-image-->
          <!--                                    width="80px"-->
          <!--                                    height="80px"-->
          <!--                                    fit="cover"-->
          <!--                                    src="https://img.yzcdn.cn/vant/cat.jpeg"-->
          <!--                            />-->
          <!--                        </div>-->
          <!--                        <div class="w-100 pl-3 pr-3">-->
          <!--                            <p class="size3 bold" style="display：inline-block;" v-model="">鸡蛋</p>-->
          <!--                            <p class="size3 bold" style="display：inline-block;"> 1</p>-->
          <!--                            <p class="size3 bold" style="display：inline-block;"> 个</p>-->
          <!--                            <p class="size1 color-lesser mt-2">5千卡</p>-->
          <!--                        </div>-->
          <!--                        <van-button class="flex-grow-shrink" plain type="primary" @click="showPopup">选择</van-button>-->
          <!--                    </li>-->
          <li v-for="(AModelAndUnits,index) in modelAndUnits ">
            <div class="flex-grow-shrink">
              <!--                            <van-image-->
              <!--                                    width="80px"-->
              <!--                                    height="80px"-->
              <!--                                    fit="cover"-->
              <!--                                    src="require('../image/userImgfcbdbde6-230b-469d-bf3c-6fe03eb81b1d.jpg')"-->
              <!--                                    error-icon="https://img.yzcdn.cn/vant/cat.jpeg"-->

              <!--                            ></van-image>-->
              <img :src="AModelAndUnits.imgurl" width="80px" height="80px"/>
            </div>
            <div class="w-100 pl-3 pr-3">
              <p class="size3 bold" style="display：inline-block;">{{AModelAndUnits.name}}</p>
              <span class="size3 bold" style="display：inline-block;">每</span>
              <span class="size3 bold" style="display：inline-block;">{{AModelAndUnits.list[0].unitName}}</span>
              <span class="size3 bold" style="display：inline-block;">消耗</span>
              <p class="size1 color-lesser mt-2">{{AModelAndUnits.list[0].unitConsumeCalories}}千卡</p>
            </div>
            <van-button class="flex-grow-shrink" plain type="primary" @click="showPopup(index)">选择</van-button>
            <van-icon name="../image/delete.png" size="40" @click="deleteFood(index)"
                      v-show="deletebuttonshow"></van-icon>
          </li>
          <li>
            <!--                        <div class="flex-grow-shrink">-->
            <!--                            <van-image-->
            <!--                                    width="80px"-->
            <!--                                    height="80px"-->
            <!--                                    fit="cover"-->
            <!--                                    src="https://img.yzcdn.cn/vant/cat.jpeg"-->
            <!--                            />-->
            <!--                        </div>-->
            <!--                        <div class="w-100 pl-3 pr-3">-->
            <!--                            <p class="size3 bold">鸡蛋1个</p>-->
            <!--                            <p class="size1 color-lesser mt-2">5千卡</p>-->
            <!--                        </div>-->
            <!--                        <van-button class="flex-grow-shrink" plain type="primary">选择</van-button>-->
            <!--                    </li>-->

        </ul>
      </div>
    </van-col>
  </van-row>
  <van-row>
    <van-col span="24">
      <div style="height: 80px;"></div>
      <div class="fixed-bottom p-2 bg-white d-flex" style="box-sizing: border-box">
        <div class="w-100 pr-2">
          <van-button square color="linear-gradient(to right, #ffa64b, #f65649)" block @click="addCustomizeFood">
            添加自定义饮食
          </van-button>
        </div>
        <div class="w-100 pl-2">
          <van-button square color="linear-gradient(to right, #4bb0ff, #6149f6)" block>添加自定义套餐</van-button>
        </div>
      </div>
    </van-col>
  </van-row>
  <van-row>
    <van-col span="24">
      <van-popup
        v-model="show"
        closeable
        position="bottom"
        :style="{ height: '60%' }"
      >
        <ul class="breakfast-list" style="margin: 50px 20px 20px 20px">
          <!--                    <li>-->
          <!--                        <div class="flex-grow-shrink">-->
          <!--                            <van-image-->
          <!--                                    width="80px"-->
          <!--                                    height="80px"-->
          <!--                                    fit="cover"-->
          <!--                                    src="https://img.yzcdn.cn/vant/cat.jpeg"-->
          <!--                            />-->
          <!--                        </div>-->
          <!--                        <div class="w-100 pl-3 pr-3" style="overflow: hidden">-->
          <!--                            <p class="size3 bold">鸡蛋1个<small class="color-ash">(23千卡/个)</small></p>-->
          <!--                            <p class="size1 mt-2 text-ellipsis">Pellentesque quam est, auctor</p>-->
          <!--                            <p class="size1 mt-2 d-flex align-items-center">-->
          <!--                                <van-icon name="star-o"></van-icon>-->
          <!--                                <span class="ml-2">收藏</span>-->
          <!--                            </p>-->
          <!--                        </div>-->
          <!--                        <div class="flex-grow-shrink size1 color-ash">-->
          <!--                            <span class="mr-2">查看实物详情</span><van-icon name="arrow"></van-icon>-->
          <!--                        </div>-->
          <!--                    </li>-->
          <li>
            <div class="flex-grow-shrink">
              <!--                            <van-image v-model="pimage"-->
              <!--                                    width="80px"-->
              <!--                                    height="80px"-->
              <!--                                    fit="cover"-->
              <!--                                    src="https://img.yzcdn.cn/vant/cat.jpeg"></van-image>-->
              <img :src="pimage" width="80px" height="80px"/>
            </div>
            <div class="w-100 pl-3 pr-3" style="overflow: hidden">
              <p class="size3 bold" v-model="popname">{{popname}}
                <small class="color-ash">(<span>{{spancosume}}</span>千卡/<span v-model="">{{spanunitname}}</span>)
                </small>
              </p>
              <p class="size1 mt-2 text-ellipsis">{{popdescription}}</p>
              <p class="size1 mt-2 d-flex align-items-center">
                <van-icon color="#ff7b34" name="star"></van-icon>
                <span class="ml-2" v-if="isCollect">已收藏</span>
                <span class="ml-2" v-else="isCollect">收藏</span>
              </p>
              <div class="d-flex align-items-center mt-3">

                <!--                                <select class="p-1" v-model="selectedFoodValue" :options="eatType.value">-->

                <!--                            </select>-->


              </div>
              <van-dropdown-menu>
                <van-dropdown-item v-model="selectedUnit" :options="popunitdata"></van-dropdown-item>
                <van-dropdown-item v-model="selectedFoodValue" :options="eatType"></van-dropdown-item>
              </van-dropdown-menu>
              <van-dropdown-menu>
                <van-cell-group>
                  <span>数量</span>
                  <van-field v-model="quanlity" placeholder="请输入数字"/>
              </van-dropdown-menu>

              </van-cell-group>
              <van-button @click="eatFood" style="margin: 8px 0;border-radius: 4px" size="small" square
                          color="linear-gradient(to right, #4bb0ff, #6149f6)" block>吃掉
              </van-button>
            </div>
            <div class="flex-grow-shrink size1 color-ash">
              <span class="mr-2" @click="toTakealookoffood()">查看实物详情</span>
              <van-icon name="arrow"></van-icon>
            </div>
          </li>
          <!--                    <li>-->
          <!--                        <div class="flex-grow-shrink">-->
          <!--                            <van-image-->
          <!--                                    width="80px"-->
          <!--                                    height="80px"-->
          <!--                                    fit="cover"-->
          <!--                                    src="https://img.yzcdn.cn/vant/cat.jpeg"-->
          <!--                            ></van-image>-->
          <!--                        </div>-->
          <!--                        <div class="w-100 pl-3 pr-3" style="overflow: hidden">-->
          <!--                            <p class="size3 bold" >{{modelAndUnits[index]}}</p>-->
          <!--                            <div class="d-flex align-items-center mt-3">-->
          <!--                                <select class="p-1">-->
          <!--                                    <option>数量：1</option>-->
          <!--                                    <option>数量：2</option>-->
          <!--                                    <option>数量：3</option>-->
          <!--                                </select>-->
          <!--                                <select class="p-1 ml-2">-->
          <!--                                    <option>条目一</option>-->
          <!--                                    <option>条目二</option>-->
          <!--                                    <option>条目三</option>-->
          <!--                                </select>-->
          <!--                            </div>-->
          <!--                        </div>-->
          <!--                        <div class="w-100 pl-3 pr-3" style="overflow: hidden">-->
          <!--                            <p class="size3 bold">鸡蛋1个</p>-->
          <!--                            <div class="d-flex align-items-center mt-3">-->
          <!--                                <select class="p-1">-->
          <!--                                    <option>数量：1</option>-->
          <!--                                    <option>数量：2</option>-->
          <!--                                    <option>数量：3</option>-->
          <!--                                </select>-->
          <!--                                <select class="p-1 ml-2">-->
          <!--                                    <option>条目一</option>-->
          <!--                                    <option>条目二</option>-->
          <!--                                    <option>条目三</option>-->
          <!--                                </select>-->
          <!--                            </div>-->
          <!--                        </div>-->
          <div class="flex-grow-shrink size1 color-ash">
            <van-icon name="arrow"></van-icon>
          </div>
          </li>
        </ul>
        <!--                <div class="m-5">-->
        <!--                    <van-image-->
        <!--                            width="100%"-->
        <!--                            fit="cover"-->
        <!--                            src="https://img.yzcdn.cn/vant/cat.jpeg"-->
        <!--                    ></van-image>-->
        <!--                </div>-->
      </van-popup>
    </van-col>
  </van-row>
</div>
</body>
<script>
  Vue.use(VueRouter);
  const router = new VueRouter({});
  //push
  const VueRouterPush = VueRouter.prototype.push;
  VueRouter.prototype.push = function push(to) {
    return VueRouterPush.call(this, to).catch(err = > err
  )
  };

  //replace
  const VueRouterReplace = VueRouter.prototype.replace;
  VueRouter.prototype.replace = function replace(to) {
    return VueRouterReplace.call(this, to).catch(err = > err
  )
  };

  var vm = new Vue({
    router,
    el: '#app',
    data() {
      return {
        spanunitname: '',
        spancosume: '',
        quanlity: 1,
        pimage: '',
        modelid: '',
        popname: '',
        isCollect: true,
        eatType: [
          {text: '早餐', value: 1},
          {text: '午餐', value: 2},
          {text: '晚餐', value: 3},
          {text: '加餐', value: 4}
        ],
        eatImg: '',
        selectedFoodValue: '',
        selectedUnit: '',
        popdescription: '',
        popunitdata: [],
        tempvalue: '暂时的数据',
        input: '',
        selectedvalue: 0,
        value1: 0,
        status: [
          {text: '默认的食物', value: 0},
          {text: '未上传的自定义食物', value: 1},
          {text: '已上传的自定义食物', value: 2},
          {text: '默认套餐', value: 3},
          {text: '未上传自定义的套餐', value: 4},
          {text: '已上传的自定义套餐', value: 5}
        ],
        deletebuttonshow: false,
        show: false,
        checked: true,
        digit: '',
        modelAndUnits: [
          {
            modelId: '',
            satus: '',
            name: '',
            fmCategory: '',
            imgurl: '',
            description: '',
            userId: '',
            list: [
              {
                fUnitId: '',
                unitName: '',
                unitConsumeCalories: ''
              },
            ],
          }
        ]
      }
    },
    beforeMount: function () {
      console.log("生命函数在这里" + this.input + this.selectedvalue);
      // console.log("let s see what is this point");
      // console.log(this);
      // let dataforpost ={
      //     status:this.selectedvalue,
      //     name : this.input,
      // };
      // console.log(dataforpost);
      // axios.post(`/fooduser/selectFoodModelByNameUseridStatus`, Qs.stringify(dataforpost))
      //     .then(res=>{
      //         this.modelAndUnits=res.data.returnList;
      //         console.log('res=>',res.data.returnList);
      //         if (res.data.returnMsg!=null)
      //             alert(res.data.returnMsg.toString());
      //         Toast(val);
      //     });
    },
    methods: {
      getImgUrl(index) {
        var dd = "../image/" + vm.$data.MovementModelAndUnits[index].imgurl;
        console.log(dd);
        return dd;
      },
      showDeleteButton() {
        console.log("show!!!!!");
        if (vm.$data.deletebuttonshow == false)
          vm.$data.deletebuttonshow = true;
        else
          vm.$data.deletebuttonshow = false;
      },
      onClickLeft() {
        window.location.href = "toIndex";
      },
      showPopup(e) {
        var index = e;

        vm.$data.pimage = vm.$data.modelAndUnits[index].imgurl;
        vm.$data.modelid = vm.$data.modelAndUnits[index].modelId;
        vm.$data.popname = vm.$data.modelAndUnits[index].name;
        vm.$data.isCollect = false;
        vm.$data.popdescription = vm.$data.modelAndUnits[index].description;
        // this.popunitdata=this.modelAndUnits[index].list;
        for (var k = 0; k < vm.$data.popunitdata.length; k++) {
          vm.$data.popunitdata.pop();
        }
        for (var i = 0; i < vm.$data.modelAndUnits[index].list.length; i++) {
          console.log("i=" + i);
          console.log("unitname=" + vm.$data.modelAndUnits[index].list[i].unitName);
          console.log("funitid=" + vm.$data.modelAndUnits[index].list[i].funitId);
          vm.$data.popunitdata.push({
            text: vm.$data.modelAndUnits[index].list[i].unitName,
            value: vm.$data.modelAndUnits[index].list[i].funitId
          });
        }
        console.log(vm.$data.popunitdata);
        vm.$data.spanunitname = vm.$data.popunitdata[0].text;
        vm.$data.spancosume = vm.$data.modelAndUnits[index].list[0].unitConsumeCalories;
        this.show = true;
        console.log(e.toString() + vm.$data.popdescription + "modelandunits is" + vm.$data.modelAndUnits[index].name);
      },
      eatFood() {
        let postdata = {
          foodId: this.modelid,
          unitId: this.selectedUnit,
          quanity: this.quanlity,
          eattime: this.selectedFoodValue,
        };
        console.log("foodid 是" + postdata.foodId);
        console.log("unitId 是" + postdata.unitId);
        console.log("quanity 是" + postdata.quanity);
        console.log("eattime 是" + postdata.eattime);
        axios.post(`/fooduser/eatAFoodModelById`, Qs.stringify(postdata))
          .then(res = > {
          console.log("data ==>" + vm.$data.modelAndUnits.toString());
        console.log("res ==>" + res.data.returnMsg.toString());
        if (res.data.returnMsg != null)
          alert(res.data.returnMsg);
        Toast(val);
      })
        ;
      },

      turn() {
        // console.log("我是this"+this.$router);
        // console.log("vm"+vm.$router);
        // console.log("this"+this.$router);
        this.$router.push({
          path: '/takealookoffood',
          param: {
            modelId: vm.$data.modelid,
          }
        });
      },
      activated() {
        console.log('我是一个傻子！！！！！！！！！')
      },
      toTakealookoffood() {
        const self = this;
        var foodId = vm.$data.modelId;
        console.log(vm.$data.modelid);
        window.location.href = "toTakealookoffood?foodId=" + vm.$data.modelid;
        // window.location.href = "toTakealookoffood?foodId="+vm.$data.modelid;
        // let postdata={
        //     foodId : vm.$data.modelid
        // }
        //      axios.post(`/jumpto/toTakealookoffood`, Qs.stringify(postdata))
        //     .then(res=>{
        //     this.modelAndUnits=res.data.returnList;
        //     alert(res.data.modelunitifo);
        // if (res.data.returnMsg!=null)
        //     alert(res.data.returnMsg.toString());
        // this.turn();
        Toast(val);
        // });
      },
      addCustomizeFood() {
        window.location.href = "toAddCustomizeFood";
      },

      deleteFood(index) {
        let postmsg = {
          foodid: vm.$data.modelAndUnits[index].modelId,
        };
        axios.post('/fooduser/deleteAFoodModel', Qs.stringify(postmsg)).then(
          res = > {
          var returnMsg = res.data.returnMsg;
        console.log("hhhh");
        if (returnMsg != null) {
          console.log(returnMsg);
          alert(returnMsg);
          if (res.data.returnMsg != null) {
            vm.$data.modelAndUnits.splice(index, 1)
          }
        }
      }
      )
      },

      onSearch() {
        // console.log(this);
        // console.log("开始搜索"+this.input+this.selectedvalue);
        let postdata = {
          status: vm.$data.selectedvalue,
          name: vm.$data.input,
        };
        console.log(postdata);
        axios.post(`/fooduser/selectFoodModelByNameUseridStatus`, Qs.stringify(postdata))
          .then(res = > {
          this.modelAndUnits = res.data.returnList;
        //将图片地址都拼接上require
        for (var i = 0; i < vm.$data.modelAndUnits.length; i++) {
          vm.$data.modelAndUnits[i].imgurl = "../image/userImg/" + vm.$data.modelAndUnits[i].imgurl;
          console.log("this new img " + vm.$data.modelAndUnits[i].imgurl);
        }
        console.log('res=>', res.data.returnList);
        if (res.data.returnMsg != null)
          alert(res.data.returnMsg.toString());
        Toast(val);
      })
        ;
      }
    }
  });
</script>
</html>
